<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>击剑动作分析系统</title>
</head>

<body>
    <h1 style="margin: 10px;">击剑动作分析</h1>
    <!-- 创建uploadForm表单，收集用户信息 -->
    <form id="uploadForm" style="margin: 10px;">
        <!-- 收集video文件 -->
        <label for="videoInput">选择视频:</label>

        <!-- 增加style -->
        <input type="file" style="color: brown;" id="videoInput" name="video" accept="video/*" 
required><br><br>

<!-- 添加画布用于显示实时分析结果 -->
<canvas id="analysisCanvas"></canvas>

    <!-- 增加视频预览 -->
    <div class="preview-container" style="margin: 10px;">
        <h2>视频预览</h2>
        <video style="width: 350px; height: 200px; margin: -15px;" id="videoPreview" class="preview-video" controls></video>
        <div id="videoInfo" class="file-info"></div>
    </div>
        <!-- 设置下拉选择菜单，收集人物位置 -->
        <label style="margin: -5px; padding-top: 20px;" for="sideInput">选择人物位置:</label>
        <select id="sideInput" name="side">
            <option value="0">单人视频</option>
            <option value="1">左边人物</option>
            <option value="2">右边人物</option>
        </select><br><br>
        <!-- 设置数字输入，收集用户身高 -->
        <label style="margin: -5px; margin-top: 10px;" for="heightInput">输入身高 (cm):</label>
        <label  for="heightInput">输入身高 (cm):</label>
        <input type="number" id="heightInput" name="height" 
value="170" required><br><br>
        <!-- 创建*上传视频*按钮，点击后运行uploadVideo函数      增加style-->
        <button type="button" style="background-color: black; color: aliceblue; width: 100px; height: 40px;" onclick="uploadVideo()">上传视频</button>
    </form>  <!-- 结束表单 -->

    <div class="results" id="resultsSection" style="background-color: #f5f5f5; padding: 20px; margin: 10px; margin-top: 20px; width: 350px;">
        <h2 style="margin-top: 10px;">数据分析</h2>
        <div id="dataAnalysis">
            进攻次数： <span id="attacksCount"></span><br>
            移动距离： <span id="sumDistance"></span>    右手夹角： <span id="rightHandAngle"></span><br>
            右脚夹角： <span id="rightAnkleAngle"></span>   左脚夹角： <span id="leftAnkleAngle"></span><br>
            右膝夹角： <span id="rightKneeAngle"></span>   左膝夹角： <span id="leftKneeAngle"></span><br>
            右肩坐标： <span id="rightShoulder"></span> 左肩坐标： <span id="leftShoulder"></span><br>
            右臂坐标： <span id="rightArm"></span> 左臂坐标： <span id="leftArm"></span>
        </div>
    </div>

    <!-- <h2>数据分析</h2>
    <div id="dataAnalysis">
        进攻次数： <span id="attacksCount"></span><br>
        移动距离： <span id="sumDistance"></span>    右手夹角： <span id="rightHandAngle"></span><br>
        右脚夹角： <span id="rightAnkleAngle"></span>   左脚夹角： <span id="leftAnkleAngle"></span><br>
        右膝夹角： <span id="rightKneeAngle"></span>   左膝夹角： <span id="leftKneeAngle"></span><br>
        右肩坐标： <span id="rightShoulder"></span> 左肩坐标： <span id="leftShoulder"></span><br>
        右臂坐标： <span id="rightArm"></span> 左臂坐标： <span id="leftArm"></span>
    </div> -->


    <script>
        // 视频预览
        document.getElementById('videoInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const preview = document.getElementById('videoPreview');
                const info = document.getElementById('videoInfo');
                
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
                info.textContent = `文件名: ${file.name}\n大小: ${(file.size / 1024 / 1024).toFixed(2)} MB`;

                // 当视频不再使用时，释放内存
                preview.onloadeddata = function() {
                    URL.revokeObjectURL(preview.src);
                }
            }
        });

        function uploadVideo() {
            // 检查视频文件，如果为空，提示
            var videoInput = document.getElementById('videoInput');
            if (videoInput.value === '') {
                alert('请先选择一个视频文件');
                return;
            }
            
            // 创建新的formData对象将uploadForm表单封装起来
            var formData = new 
FormData(document.getElementById('uploadForm'));
            // 使用fetch API 发送POST请求到服务器的 /invideo 路径，携带formData作为请求体。
            fetch('/invideo', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                alert('运行已经完成。');
                updateData(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        function updateData(data) {
            document.getElementById('attacksCount').textContent = 
            data.attacks_count;
            document.getElementById('sumDistance').textContent = 
            data.sum_distance;
            document.getElementById('rightHandAngle').textContent = 
            data.right_hand_angle;
            document.getElementById('rightAnkleAngle').textContent = 
            data.right_ankle_angle;
            document.getElementById('leftAnkleAngle').textContent = 
            data.left_ankle_angle;
            document.getElementById('rightKneeAngle').textContent = 
            data.right_knee_angle;
            document.getElementById('leftKneeAngle').textContent = 
            data.left_knee_angle;
            document.getElementById('rightShoulder').textContent = 
            data.right_shoulder;
            document.getElementById('leftShoulder').textContent = 
            data.left_shoulder;
            document.getElementById('rightArm').textContent = 
            data.right_hip;
            document.getElementById('leftArm').textContent = 
            data.left_hip;
        }

        // 设置定时器，每秒向服务器请求最新数据
        setInterval(() => {
            fetch('/data')
            .then(response => response.json())
            .then(data => {
                updateData(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }, 1000); // 每秒更新一次数据

    </script>
</body>
</html>